<template>
  <div v-if="flag" style="width: 1154px;margin: 0 auto;position: relative; color: rgb(51, 51, 51)" >
    <el-row :gutter="25" style="margin: 0">
      <!-- left main contain     -->
      <el-col :span="15">




        <!-- PART 1 carousel contain       -->
        <el-carousel height="450px" arrow="always" trigger="click" indicator-position="none"  style="--el-carousel-arrow-background:#00cf97; --el-carousel-arrow-hover-background: rgba(0,207,151,0.53)">


          <el-carousel-item v-for="img in vehicleData.imgUrls" style="height: 430px;" >
            <img :src="img" alt="" style="width: 100%; height: 100%; border-radius: 5px;" loading="lazy" />
          </el-carousel-item>
        </el-carousel>


        <!-- 导航栏  -->
        <div style="width: 100%;">
          <el-affix >
            <el-anchor :offset="70" direction="horizontal">
              <el-anchor-link href="#qjx-租金趋势" >
                <span class="qjx-anchor-span">租金趋势</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-可租用时间">
                <span class="qjx-anchor-span">可租用时间</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-用车限制">
                <span class="qjx-anchor-span">用车限制</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-车辆配置">
                <span class="qjx-anchor-span">车辆配置</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-优车推荐">
                <span class="qjx-anchor-span">优车推荐</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-平台优势">
                <template #default>
                  <span class="qjx-anchor-span">平台优势</span>
                </template>
              </el-anchor-link>
            </el-anchor>
          </el-affix>
        </div>



        <!-- PART 2 rent contain  -->
        <div id="qjx-租金趋势" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">租金趋势</h1>
          <!--  rent options        -->
          <div class="qjx-rent-option-box" style="width: 100%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">月租折前价</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>{{vehicleData.monthRentPrice}}</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">折后30-89天</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>{{Math.round(vehicleData.monthRentPrice*0.67)}}</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">折后90-179天</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>{{Math.round(vehicleData.monthRentPrice*0.67)}}</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">折后180-359天</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>{{Math.round(vehicleData.monthRentPrice*0.67)}}</strong>元/月均</span>
          </div>
        </div>
        <!--         PART 3 calendar contain       -->

        <div id = "qjx-可租用时间" class="qjx-left-component-div" style="height: 550px; position: relative">
          <div style="width: 100%; height: 450px; position: absolute; bottom: 0;left: 0; z-index: 99">

          </div>
          <h1 class="qjx-left-component-sub-title">可租用时间</h1>

          <el-row :gutter="20" >
            <el-col :span="12">
              <!--  calender 1        -->
              <el-calendar  style="width: 100%;"  ref="calendar1" v-model="cal1Value">
                <template #header="{ date }">
                  <el-button size="small" @click="selectDate('prev-month'); calendar_prev_click()" :disabled="start==0">
                    ←
                  </el-button>
                  <span>{{ date }}</span>
                  <span> </span>
                </template>
                <template #date-cell="{ data }">
                  <div style="position: relative;">
                    <p v-if="data.type=='current-month'" :class="compareDates(new Date(data.day)) ? 'pass-day' : '' "  style="margin: 0;">{{data.day.split('-')[2]}}<br>
                      <span style="font-size: 11px; color: #b7b7b7; right: 6px; position: relative;" v-if="!compareDates(new Date(data.day))">￥{{vehicleData.dayRentPrice}}</span>
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-col>
            <!--  calender 2        -->
            <el-col :span="12">
              <el-calendar  style="width: 100%;" ref="calendar2" v-model="cal2Value">
                <template #header="{ date }">
                  <span> </span>
                  <span>{{ date }}</span>
                  <el-button size="small" @click="selectDate('next-month');calendar_next_click()" :disabled="end==0">
                    →
                  </el-button>
                </template>
                <template #date-cell="{ data }" >
                  <div style="position: relative;">
                    <p v-if="data.type=='current-month'" :class="compareDates(new Date(data.day)) ? 'pass-day' : '' " style="margin: 0;">{{data.day.split('-')[2]}}<br>
                      <span style="font-size: 11px; color: #b7b7b7; right: 6px; position: relative;" v-if="!compareDates(new Date(data.day))">￥{{vehicleData.dayRentPrice}}</span>
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-col>
          </el-row>
        </div>
        <!-- PART 4 用车限制 contain       -->
        <div id="qjx-用车限制" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">用车限制</h1>
          <el-row :gutter="10" style="text-align: left; font-size: 14px;">
            <el-col :span="12">

              <p><span style=" opacity: 0.8;">提前预定 </span><strong>2-4小时</strong></p>
              <p><span style=" opacity: 0.8;">不便交车 </span><strong>每天 23:00-次日07:00</strong></p>
            </el-col>
            <el-col :span="12">
              <p><span style=" opacity: 0.8;">月均限行 </span><strong>2-月均限9000km</strong></p>
              <p><span style=" opacity: 0.8;">燃油政策 </span><strong>建议原油位返还</strong></p>
            </el-col>
          </el-row>
        </div>
        <!-- PART 5 车辆配置 contain       -->
        <div id="qjx-车辆配置" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">车辆配置</h1>
          <!-- 公用配置       -->
          <el-row :gutter="10" style="text-align: left; font-size: 14px;">
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">车龄&nbsp;&nbsp;&nbsp; </span><strong>{{vehicleData.year}}年</strong></p>
            </el-col>
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">座椅&nbsp;&nbsp;&nbsp; </span><strong>{{feature1.seats}}位</strong></p>
            </el-col>
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">驱动方式&nbsp;&nbsp;&nbsp; </span><strong>{{driveModeFormatter(feature1.driveType)}}</strong></p>
            </el-col>


            <!--            电车配置-->
            <template v-if="vehicleData.powerType==='0'">
              <el-col :span="8">
                <p><span style=" opacity: 0.8;">动力：电动&nbsp;&nbsp;&nbsp; </span><strong>{{electricTypeFormatter(feature1.electricType)}}</strong></p>
              </el-col>
              <el-col :span="8">
                <p><span style=" opacity: 0.8;">续航里程&nbsp;&nbsp;&nbsp; </span><strong>{{feature1.expectRange}}km</strong></p>
              </el-col>
            </template>
            <!--            燃油车, 混动车配置-->
            <template v-if="vehicleData.powerType==='1' || vehicleData.powerType==='2'">
              <el-col :span="8">
                <p><span style=" opacity: 0.8;">油箱容量&nbsp;&nbsp;&nbsp; </span><strong>{{feature1.tankCapacity}}L</strong></p>
              </el-col>
              <el-col :span="8">
                <p><span style=" opacity: 0.8;">排量&nbsp;&nbsp;&nbsp; </span><strong>{{feature1.displacement}}L</strong></p>
              </el-col>
              <el-col :span="8">
                <p><span style=" opacity: 0.8;">动力：汽油&nbsp;&nbsp;&nbsp; </span><strong>{{gasTypeFormatter(feature1.gasType)}}L</strong></p>
              </el-col>

            </template>


          </el-row>

          <h1 class="qjx-left-component-sub-title">车辆特色</h1>


          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="4">
              <el-card style="text-align: center; --el-card-padding: 0px; border: 0" shadow="never">
                <img src="https://carphoto.atzuche.com/system/home/v591/daocheyingxiang_anhei.png" style="height: 30px; width: 30px;">
                <p style="font-size: 12px; margin-top: 0;">倒车影像</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- PART 6   优车推荐     -->
        <div id="qjx-优车推荐" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title" style="margin-bottom: 40px;">优车推荐</h1>
          <el-row :gutter="10">
            <el-col :span="6" v-for="item in recommendList">
              <div class="recommend-car-item" style="text-align: left; position: relative; " @click="myclick()">
                <img :src="item.imgs" style="width: 100%; --el-card-padding: 0px;height: 120px;">
                <p style="font-size: 14px; opacity: 0.8; margin-bottom: 0;">{{item.brandInfo}}</p>
                <p style="margin: 0;">
                  <span style="font-size: 12px; opacity: 0.6;">{{ item.plateNumber }}</span> <span style="font-size: 12px; color: #ff5c5c"> 5.0分</span>
                </p>
                <p style="margin-top: 0;color: #ff5c5c; font-size: 12px;"><strong style="font-size: 16px;">{{item.monthRentPrice}}</strong>元/月</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- PART 7   平台优势     -->
        <div id="qjx-平台优势" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">平台优势</h1>
          <p style="margin-top: 0;font-size: 14px; opacity: 0.6; text-align: left;">凹凸出行，万款车型共享平台。APP一键下单、车管家送车上门、高额保障用车无忧。自2014年上线，凹凸出行已累计：</p>
          <el-row :gutter="10">
            <el-col :span="6" v-for="item in 4" style="text-align: left">
              <img style="height: 30px;width: 30px; margin: 15px 0" src="">
              <p style="margin: 0; font-size: 20px; font-weight: 700">10000+</p>
              <p style="margin: 0; font-size: 14px; opacity: 0.7;">精选共享车型</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- part 8 right main contain     -->
      <el-col :span="9">
        <div style="width: 100%">
          <a href="#"><img src="https://www.atzuche.com/static/media/bg4.f9fdb60e.jpg" style="margin-bottom:10px; background-repeat: no-repeat; width: 100%;"></a>
          <a href="#"><img src="https://www.atzuche.com/static/media/bg5.e2563263.jpg" style="margin-bottom:10px; background-repeat: no-repeat; width: 100%;"></a>
          <div style="font-size: 12px; box-sizing:border-box; text-align: left; border: 1px solid rgb(236, 236, 239); padding: 20px; width: 100%; position: relative; border-radius: 5px;">
            <p style="color: #ff5c5c;"><strong style="font-size: 24px;">￥{{Math.round(vehicleData.monthRentPrice*0.67)}} </strong>/月均</p>
            <strong style=" font-size: 20px"  >{{vehicleData.brandInfo}}</strong>


            <a @click="scrollToAnchor('qjx-可租用时间')">
              <el-button   style="margin: 20px 0 0 0; width: 100%; font-size: 15px; height: 50px;">查看可用租时间</el-button>
            </a>


            <el-button color="#14d78a" style=" margin: 15px 0 20px 0; width: 100%; font-size: 15px; color: #ffffff; height: 50px;" @click="handleCreateOrder">租车预约</el-button>

            <!-- 订单确认弹窗 -->
            <el-dialog title="订单信息" v-model="addOrderDialogVisible" style="width:1000px;padding:40px;font-weight: bold" :before-close="closeOrderDialog">
              <el-form label-width="80px" label-position="top">
                <el-row :gutter="30">
                  <el-col :span="12">
                    <el-form-item label="租车人" style="width:96%;">
                      <!-- 租车人是当前登录人,需要从localStorage中获取,只读 -->
                      <el-input readonly v-model="userInfo.nickname" ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="请选择租车时间段">
                      <el-date-picker
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="取车时间"
                          end-placeholder="还车时间"
                          value-format="YYYY-MM-DD"
                          format="YYYY-MM-DD"
                          v-model="times"
                          :disabled-date="disableDateFunction"
                          @change="calculateCost"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="30">
                  <el-col :span="12">
                    <el-form-item label="已选车辆" style="width:96%;">
                      <!-- 车辆信息是是当前页面的车辆,如何获取,只读 -->
                      <el-input readonly v-model="vehicleData.plateNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="取车城市" style="width:96%;">

                      <el-input readonly v-model="cityName" />
                    </el-form-item>

                  </el-col>

                </el-row>

                <el-row :gutter="30">

                  <el-col :span="12">
                    <el-form-item label="优惠选择">
                      <el-select v-model="saveOrderForm.couponType" placeholder="请选择优惠类型" style="width:96%;">
                        <el-option value="0" label="暂无"></el-option>
                        <!--                        <el-option value="30" label="商家优惠券"></el-option>-->
                        <!--                        <el-option value="40" label="平台优惠券"></el-option>-->
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="选择取车地">
                      <el-select v-model="saveOrderForm.addr" placeholder="请选择门店">
                        <el-option v-for="(item,index) in storeArr" :value="item.id" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="30">
                  <el-col :span="12">
                    <div class="xqx-tips">
                      <el-radio-group v-model="content" size="small" fill="#00CF97">
                        <el-radio-button v-for="p in arr" :value="p.text">{{p.title}}</el-radio-button>
                      </el-radio-group>
                    </div>

                    <div  class="xqx-blod">
                      <div class="xqx-font">
                        <h4>{{content}}</h4>
                      </div>
                    </div>

                  </el-col>
                  <el-col :span="12">

                    <div class="xqx-zuchebaozhang">
                      <div class="xqx-content">
                        <div class="xqx-title">
                          <span>凹凸</span><span style="color: #00CF97;font-weight: bold">租车保障</span>
                        </div>
                        <h4>基本保障:</h4>
                        <h4>1.您无需承担理赔范围内车辆损失超过1500元的部分，不含玻璃、轮胎。</h4>
                        <h4>2.您无需承担理赔范围内行车致使第三方人身或财产损失20万以内的部分。</h4>
                        <h4>3.您需要承担因车损导致的停运费。</h4>
                        <h4>4.您需要承担因车损导致的折旧费。</h4>
                      </div>
                    </div>

                  </el-col>

                </el-row>
                <br>
                <el-row :gutter="30">
                  <el-col :span="12">
                    <input type="checkbox" id="yes" v-model="saveOrderForm.agreeContract">
                    <label for="yes" >我同意《凹凸租车汽车租赁合同》 并授权征信审核
                      <br>
                    </label><a href="/car_rental_contract " style="text-decoration: none; color: black;">&nbsp;>>协议详情<<</a>
                  </el-col>
                  <el-col :span="12">
                    <h4 class="price">
                      金额:
                      <span v-if="costVO.discountCost !== costVO.originalCost" style="text-decoration:line-through;">{{costVO.originalCost}}</span>
                      {{costVO.discountCost === costVO.originalCost?  costVO.originalCost : costVO.discountCost}} 元</h4>
                  </el-col>
                </el-row>
              </el-form>

              <template #footer>
                <!--                <el-button>取消</el-button>-->
                <el-button color="#00CF97"  type="primary" @click="saveOrder"><span style="color: whitesmoke">提交订单</span></el-button>
              </template>
            </el-dialog>

          </div>
        </div>
      </el-col>
    </el-row>
    <!-- part 9 同价位车型推荐   -->
    <div style="margin-bottom: 40px;">
      <h1 class="qjx-left-component-sub-title">同价位车型推荐</h1>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in recommendList">
          <a href="#" >
            <img class="qjx_image" style="transition: all 0.2s ease-in-out; width: 100%; border-radius: 5px; height: 185px" :src="item.imgs">
          </a>
          <p style="text-align: left; font-size: 12px;">
            <a href="#" class="qjx-recommend-car-link" style="text-decoration: none; color: #333;"><strong style="font-size: 15px">{{item.brandInfo}}</strong></a><br>
            <span >{{item.plateNumber}} <span style="color: #ff5c5c">{{item.score}}分</span></span><br>
            <span style=" display: block; margin-top: 15px; color: #ff5c5c"><strong style="font-size: 18px;">{{item.monthRentPrice}}元</strong>/月均</span>

          </p>
        </el-col>
      </el-row>
    </div>

  </div>

</template>


<script setup>
import {ref,onMounted} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import request from '@/utils/request';
import {useRoute} from "vue-router";
import router from "@/router";

let cityName = ref('')
const vehicleAvailableTime = ref()
//结合其他订单已用时间, 获得车辆可用时间
const loadAvailableTime = (vehicleId) => {
  request.get('/order/vehicle/availabletime?vehicleId='+vehicleId).then(res => {
    vehicleAvailableTime.value = res.data


  })
}

//onMounted--------------------------------------------------------------------------
onMounted(()=>{
  loadAllDictOptions()
  loadRecommendList()
  loadVehicleInfo()

})
//推荐车辆列表
const recommendList = ref()
const loadRecommendList = ()=>{
  request.get("/vehicle/recommend/"+id).then(res => {
    console.log(res.data)
    recommendList.value = res.data
  })
}



const cityId = ref()
const vehicleData = ref({})


const feature1 = ref({})
const feature2 =ref({})
const availableTime =ref({})
let id = useRoute().query.id

//加载车辆信息------------------------------------------------------
const loadVehicleInfo=()=>{
  loadAvailableTime(id)
  request.get('/vehicle/'+id).then((response) => {
    if (response.code == 200) {

      const feature = JSON.parse(response.data.vehicleFeature)

      feature1.value = feature.feature1
      feature2.value = feature.feature2



      //构造车辆可用时间数组

      let availableTimeArr = []
      for(let item of JSON.parse(response.data.availableTime)){
        availableTimeArr.push(item.period.toString().split(','))
      }
      availableTime.value = availableTimeArr

      Object.assign(vehicleData.value,{
        ...response.data,
        vehicleFeature : JSON.parse(response.data.vehicleFeature),
        carouselImgs : JSON.parse(response.data.carouselImgs),
        imgUrls : JSON.parse(response.data.imgUrls),
        availableTime : availableTimeArr

      })
      cityId.value = vehicleData.value.cityId
      // console.log(cityId.value)
      loadStoreArr()
      cityIdFormatter(vehicleData.value.cityId)
      flag.value=true


    }
  })
}


//el-calendar模块-----------------------
const calendar1 = ref()
const calendar2 = ref()
const today=new Date();
const todayStart = startOfDay(today);

const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, '0');
const day = today.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
const cal1Value=ref(formattedDate);
const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1);
const cal2Value = ref(nextMonth)

const flag =ref(false)


//<p v-if="data.type=='current-month'" :class="compareDates(formattedDate,data.day) ? 'futureDay' : '' "  style="margin: 0;">{{data.day.split('-')[2]}}<br>

const compareDates=(d2)=> {
  var d1 = todayStart;
  let flag = true;
  if (d1 > d2) {
  } else {
    for(let i in vehicleAvailableTime.value){
      for(let j in vehicleAvailableTime.value[i]){
        let startDate = new Date(vehicleAvailableTime.value[i][j].startDate)
        let endDate = new Date(vehicleAvailableTime.value[i][j].endDate)
        if(startDate <= d2 && endDate >= d2){
          flag = false
          break
        }
      }
    }
  }
  return flag
}

const compareDates2=(d2)=> {
  var d1 = todayStart;
  let flag = true;
  if (d1 > d2) {
  } else {
    for(let i in vehicleAvailableTime.value){
      for(let j in vehicleAvailableTime.value[i]){
        let startDate = new Date(vehicleAvailableTime.value[i][j].startDate)
        startDate.setDate(startDate.getDate()-1)
        let endDate = new Date(vehicleAvailableTime.value[i][j].endDate)
        if(startDate <= d2 && endDate >= d2){
          flag = false
          break
        }
      }
    }
  }
  return flag
}

const selectDate = (val) => {
  if (!calendar1.value) return
  calendar1.value.selectDate(val)

  if (!calendar2.value) return
  calendar2.value.selectDate(val)

}



const start =ref(0);
const end =ref(6);

const calendar_prev_click = () => {
  start.value = start.value-1 >= 0 ? start.value-1 : 0
  end.value = end.value+1 <= 6 ? end.value + 1 : 6

}
const calendar_next_click = () => {
  start.value = start.value+1 <= 6 ? start.value + 1 : 6
  end.value = end.value-1 >= 0 ? end.value-1 : 0

}

//定义变量订单确认弹窗是否出现
const addOrderDialogVisible = ref(false);

//定义"取车规则文本内容"
const content = ref('驾驶员本人身份证原件,有效期1个月以上，不支持照片、电子身份证及复印件;驾驶员本人驾驶证原件(支持12123电子驾照),有效期2个月以上;驾驶员本人国内信用卡,有效期1个月以上(免押订单无需提供);');
const arr = ref([
  {title:'取车证件',text:'驾驶员本人身份证原件,有效期1个月以上，不支持照片、电子身份证及复印件;驾驶员本人驾驶证原件(支持12123电子驾照),有效期2个月以上;驾驶员本人国内信用卡,有效期1个月以上(免押订单无需提供);'},
  {title:'取消规则',text:'取车时间前(2024-06-28 10:00前):免费取消；超过取车时间取消(2024-06-28 10:00):收取订单总金额的100%作为违约金。'},
  {title:'提前还车',text:'如果是普通订单： 提前还车不退费。 如果是节假日订单： 提前还车不退费。'},
  {title:'里程限制',text:'里程限制:不限里程。'},
  {title:'禁行区域',text:'车辆不允许驶入西藏自治区，新疆维吾尔自治区； 车辆不允许驶出广西壮族自治区； 若执意前往禁行区域，出租方有权强制收回车辆，造成的相关费用由承租方承担。'},
  {title:'发票说明',text:'请在还车后向门店索取发票。'}
]);


//定义变量用来保存起止时间
const times = ref([]);
//获得登录用户信息
const userInfo = ref({
  avatar :'',
  birthday:'',
  email:'',
  gender:'',
  id:undefined,
  nickname:'',
  phoneNum:'',
  roleIds:'',
  status:''
})
const loadUserinfo =()=> {
  request.get(`users/myinfo`).then(res => {
    Object.assign(userInfo.value,res.data)
  })
}
//处理点击创建订单按钮
const handleCreateOrder = () =>{
  addOrderDialogVisible.value=true
  loadUserinfo()
}


const totalCost =ref(0)
const costVO = ref({
  discountCost:0,
  originalCost:0

})
const calculateCost = ()=>{
  const calCostFormData = {
    vehicleId: id,
    startDate: times.value[0],
    endDate: times.value[1],
  }
  const data = qs.stringify(calCostFormData)
  request.get('/cost/rent?'+ data)
      .then(res => {
        console.log(res)
        costVO.value = res.data
        totalCost.value=res.data.discountCost
      })
}
const closeOrderDialog = ()=>{
  if(confirm("确认退出吗?")){

    resetFormData()
  }

}
const saveOrderForm = ref({
  vehicleId: id,
  addr: '',
  couponType:'',
  pickupCityId:''


});
const formRules = ref({
  addr: [{required: true, message: '请选择地址'}],
  times: [{required: true, message: '请选择时间段'}]

})
const formRef = ref()

const resetFormData = () => {
  saveOrderForm.value.addr = ''
  saveOrderForm.value.couponType = ''
  totalCost.value=0
  times.value=[]
  addOrderDialogVisible.value = false;
}
//获得门店列表信息
const storeArr = ref()
const loadStoreArr = () => {
  request.get('/order/store?cityId='+cityId.value).then(res => {
    storeArr.value = res.data.list

  })
}


//定义保存订单信息的方法
const saveOrder = () => {

  // // 所有必填字段都已选择，才能保存订单
  saveOrderForm.value.startDate = times.value[0]; // 设置开始时间
  saveOrderForm.value.endDate = times.value[1]; // 设置结束时间
  saveOrderForm.value.pickupCityId = cityId.value;
  let data = qs.stringify(saveOrderForm.value);
  console.log(saveOrderForm.value)
  request.post('order/saveOrder', data).then((response) => {
    if(response.code == 200){
      ElMessage.success('订单保存成功');
      console.log(response)
      let orderId = response.data
      resetFormData()
      addOrderDialogVisible.value = false

      router.push("/payment?orderId="+orderId)


    }

  })
};
//城市id转城市名称的方法
const cityIdFormatter = (val)=>{
  request.get('/city/'+val).then(res => {
    console.log(res.data.name)
    cityName.value = res.data.name

  })

}
function startOfDay(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
}


const disableDateFunction=(any)=>{
  return compareDates2(any)

  // compareDates(formattedDate,any)
  // return any.getTime()> Date.now() - 7* 24 *3600*1000


}


//formatter-----------------------------------------------------------------
const driveModeFormatter = (val)=>{
  for(let index in driveTypeOptions.value){
    if(driveTypeOptions.value[index].value==val){
      val = driveTypeOptions.value[index].label
      return val
    }
  }
  return val
}
const electricTypeFormatter = (val)=>{

  for(let index in electricTypeOptions.value){
    if(electricTypeOptions.value[index].value==val){
      val = electricTypeOptions.value[index].label
      return val
    }
  }
  return val
}
const gasTypeFormatter = (val)=>{

  for(let index in gasTypeOptions.value){
    if(gasTypeOptions.value[index].value==val){
      val = gasTypeOptions.value[index].label
      return val
    }
  }
  return val
}

const myclick=()=>{

  ElMessage.success('点击了');
}

//字典数值
const driveTypeOptions = ref()
const electricTypeOptions = ref()
const gasTypeOptions = ref()


//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptions(driveTypeOptions,3)
  loadDictOptions(electricTypeOptions,15)
  loadDictOptions(gasTypeOptions,4)



}
const scrollToAnchor =(anchorName)=>{
  const anchorElement = document.getElementById(anchorName);

  if (anchorElement) {
    const targetPosition = anchorElement.offsetTop ;
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  }

}

</script>



<style scoped>

.qjx-anchor-span{
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
  display: block;
  line-height: 50px;
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


.qjx-rent-option-box{
  height: 40px;
  border: 1px solid #ffeab8;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fffbf3;
  padding: 0 10px;
  margin-bottom:10px
}
.qjx-left-component-div{
  border-bottom: 1px solid rgba(60,60,90,.1);
  margin-bottom: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: auto;

}
.qjx-left-component-sub-title{
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  margin-bottom: 20px;

}


.qjx_image:hover{
  transform: scale(1.02);
}
</style>
<style>
.qjx-left-component-div .el-calendar .el-calendar__body .el-calendar-table .el-calendar-day{
  height: 60px;
  width: 100%;
  text-align: center;
}
.recommend-car-item:hover{
  cursor: pointer;
}

.pass-day{
  opacity: .3;
}


.sticky{
  position: fixed;
  left: 0;
  top: 80px;
  z-index: 99;
  width: 100%;
  background-color: #ff5c5c;
  height: 100px;

}
.el-calendar-table td.is-selected {
  background-color: #FFFFFF;
}

.xqx-zuchebaozhang{
  width: 442px;
  height: 220px;
  border: 1.5px solid lightgray;
  border-radius: 6px;
}

.xqx-content{
  margin: 0 10px;
}

.xqx-content span{
  margin-top: 10px;
  font-size: 18px;
}

.xqx-content h4{
  margin: 5px 0;
}

.xqx-title{
  margin: 10px 5px 15px;
}
.xqx-blod{
  width: 425px;
  height: 75px;
  border: 1.5px solid lightgray;
  border-radius: 6px;
}

.xqx-font h4{
  margin: 5px 0;
}

.price{
  font-size: 20px;
  float: right;
  margin-right: 15px;
}
</style>